<apes-header>
  <apes-button-list class="buttonList" [ctx]="ctx" [buttonBarMetadata]="buttonBar"
                    (click)="onEvent($event)"></apes-button-list>
</apes-header>

<apes-content>

<!--  <div dStepsGuide-->
<!--       [pageName]="'step-custom-demo'"-->
<!--       [stepIndex]="0"-->
<!--       [leftFix]="-95"-->
<!--       [topFix]="-74"-->
<!--       [dStepsGuidePosition]="'top'"-->
<!--       (click)="reset(0)">Custom Position-->
<!--  </div>-->

<!--  <button-->
<!--    apes-button apesType="primary"-->
<!--    dStepsGuide-->
<!--    [targetElement]="targetElement"-->
<!--    [scrollToTargetSwitch]="false"-->
<!--    [pageName]="'step-custom-demo'"-->
<!--    [stepIndex]="1"-->
<!--    [dStepsGuidePosition]="'bottom-left'"-->
<!--    [zIndex]="2000"-->
<!--    [extraConfig]="config"-->
<!--    (click)="reset(1)"-->
<!--  >-->
<!--    Custom Target-->
<!--  </button>-->
<!--  <button-->
<!--    apes-button apesType="primary"-->
<!--    dStepsGuide-->
<!--    [targetElement]="targetElement"-->
<!--    [scrollToTargetSwitch]="false"-->
<!--    [pageName]="'step-custom-demo'"-->
<!--    [stepIndex]="2"-->
<!--    [dStepsGuidePosition]="'bottom-right'"-->
<!--    [zIndex]="2000"-->
<!--    [observerDom]="observerDom"-->
<!--    (click)="reset(2)"-->
<!--  >-->
<!--    Observer Dom-->
<!--  </button>-->

<!--  <button apes-button apesType="primary" id="test-btn">-->
<!--    就是我-->
<!--  </button>-->

  <ng-container *ngFor="let step of stepsItem;let i = index">
    <button
      apes-button apesType="primary"
      dStepsGuide
      class="show-steps-guide"
      [ngClass]="{node: i != 0}"
      [targetElement]="step.targetElement"
      [scrollToTargetSwitch]="false"
      [pageName]="step.pageName"
      [stepIndex]="i"
      [dStepsGuidePosition]="step.position"
      [observerDom]="step.targetElement"
      (click)="resetTest(i)"
    >{{step.pageName}} {{i}}</button>
  </ng-container>

  <div (click)="resetTest(0)">点我</div>

  <ng-container *ngFor="let step of stepsItem;let i = index">
    <div id="{{step.target}}" style="margin-bottom: 20px; width: 300px;">你看我不到！！！！</div>
  </ng-container>

</apes-content>


